{include file="common/head"/}
<style>
    #se{
        margin-top: 10px;
        border-bottom: 1px solid #ccc;
    }
    .tl{
        display: inline-block;
        width: 50px;
        text-align: center;
        line-height: 45px;
        float: left;
    }
    .sul{
        float: left;
    }
    .sul li{
        float: left;
        height: 100%;
        line-height: 45px;
        font-size: 16px;
        padding: 0 10px;
        cursor: pointer;
    }
    .state{
        height: 45px;
    }
    .sul li:hover{
        background-color: #f1f1f1;
    }
    .lied{
        background-color: #ccc !important;
    }
    #start_check{
        display: inline-block;
        width: 100px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        cursor: pointer;
        font-size: 18px;
        border: 1px solid #ccc;
    }
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>工具列表</legend>
    </fieldset>
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="key" id="key" placeholder="{:lang('pleaseEnter')}编号或关键字">
        </div>
        <button class="layui-btn" id="search" data-type="reload">{:lang('search')}</button>
        <!--<a href="{:url('queryPage')}" class="layui-btn">显示全部</a>-->
        <button type="button" class="layui-btn layui-btn-normal" id="set" >预警设置</button>
        <button type="button" class="layui-btn" id="add">添加工具</button>
        <button type="button" class="layui-btn layui-btn-danger" id="check">校验</button>
       <!-- <button type="button" class="layui-btn layui-btn-danger" id="check_tools">检测工具</button>-->
    </div>

    <div id="se">

        <div class="state">
            <span class="tl">状态:</span>
            <ul class="sul">
                <li class="lied" val="0">全部</li>
                <li val="30">空闲</li>
                <li val="31">使用中</li>
                <li val="33">损坏</li>
                <li val="34">丢失</li>
            </ul>

        </div>

    </div>


    <table class="layui-table" id="list" lay-filter="list"></table>
</div>
{include file="common/foot"/}
<script type="text/html" id="option">

    <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="record">使用记录</a>

    {{# if(d.state_id==45){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="compCheck" >校验完成</a>

    {{# } }}
    {{# if(gid==1){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" >删除</a>
    {{# } }}
</script>

<script type="text/html" id="state">
    {{# if(d.state_id==33){ }}
        <span style="color: red"> {{d.state_name}}</span>
    {{# }else if(d.state_id==34){  }}
        <span style="color: red"> {{d.state_name}}</span>
    {{# }else{  }}
        <span style="color: #00B83F"> {{d.state_name}}</span>
    {{# } }}
</script>

<script type="text/html" id="pic">
    <img src="{{d.pic}}" style="max-width: 130px;" alt="">
</script>

<script type="text/html" id="waring">


    {{# if(d.is_check == 1 ){ }}
        {{# if(d.sur_waring > 0 ){ }}

            {{# if(d.sur_waring < waring ){ }}
                <span style="color: red">剩余校验期限{{d.sur_waring}}天</span>
            {{# }else{  }}
                <span style="color: green">{{d.sur_waring}}天</span>
            {{# } }}

        {{# }else{  }}
            <span style="color: red">已超过校验期限{{Math.abs(d.sur_waring)}}天</span>
        {{# } }}
    {{# }else{  }}
    <span style="">无需校验</span>

    {{# } }}
</script>

<script>



    let gid = '{:session("gid")}';

    let waring = 0;

    layui.use('table', function() {
        var table = layui.table, $ = layui.jquery,page = layui.laypage;
        var tableIn = null;

        let indexl = layer.load(0,{offset:['45%','45%']});
        //读取预警
        $.post('{:url("set/get")}',{name:'tools_waring'},function (d) {
            waring = d.val;
            layer.close(indexl);
            tableIn = table.render({
                id: 'tools',
                elem: '#list',
                url: '{:url("queryPage")}',
                method: 'post',
                page: true,
                cols: [[
                    {checkbox: true, fixed: true},
                    {field: 'number', title: '{:lang("id")}', width: 180,fixed: true},
                    {field: 'title', title: '标题', width: 180},
                    {field: 'pic', title: '图片', width: 180,toolbar:"#pic"},
                    {field: 'attr', title: '属性', width: 180},
                    {field: 'model', title: '型号', width: 120},
                    {field: 'desc', title: '描述', width: 180},
                    {field: 'type_name', title: '类型', width: 120},
                    {field: 'sur_waring', title: '剩余校验期限', width: 180,toolbar:'#waring'},
                    {field: 'state_name', title: '状态', width: 80,toolbar:'#state'},
                    {width: 200, align: 'center', toolbar: '#option'}
                ]],
                limit: 10 //每页默认显示的数量
            });

        });

        //搜索
        $('#search').on('click', function () {
            var key = $('#key').val();
            if ($.trim(key) === '') {
                layer.msg('{:lang("pleaseEnter")}关键字！', {icon: 0});
                return;
            }

            tableIn.reload({
                where: {key: key,page:1}
            });
        });

        //筛选
        $('.sul').on('click','li',function () {
            var sid = $(this).attr('val');
            if($(this).attr('class') == 'lied'){
                return;
            }
            $(this).addClass('lied').siblings('li').removeClass('lied');
            if(sid=='0') sid = '';
            tableIn.reload({
                where: {state_id: sid}
            });
        });


        table.on('tool(list)', function(obj) {
            var data = obj.data;
            if (obj.event === 'record') {

                var str = '<div style="margin: 5px 15px"><table class="layui-table" style="text-align: center">';
                str += '<thead><tr><th>借用日期</th><th>出借人</th><th>借用人</th><th>归还人</th><th>归还日期</th><th>状态</th><th>备注</th></tr></thead>';

                str += '<tbody id="dataRec"></tbody>';
                str += '</table>';
                str += '<div id="page_rec" style="text-align: center"></div></div>';

                layer.open({
                    title:'使用详情',
                    area:['800px','650px'],
                    content:str,
                    type:1,
                    maxmin: true,
                    success:function (lay,index) {

                        $.post('{:url("lendRec")}',{page:1,per_page:10,id:data.id},function (res) {
                            pages(res.data,data.id);
                            recBack(res.data,data.id);
                        });
                    }
                });

            }else if(obj.event == 'edit'){
                location.href = '{:url("editUI")}?id='+data.id;
            }else if(obj.event == 'del'){
                layer.confirm('您确定要删除吗？', function(index){

                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('del')}",{id:data.id},function(res){
                        layer.close(loading);
                        if(res.code===1){
                            layer.msg(res.msg,{time:1000,icon:1});
                            tableIn.reload();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                        }
                    });
                    layer.close(index);
                });
            }else if(obj.event == 'compCheck'){
                layer.confirm('您确定完成校验吗？', function(index){

                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('compCheck')}",{ids:data.id},function(res){
                        layer.close(loading);
                        if(res.code===1){
                            layer.msg(res.msg,{time:1000,icon:1});
                            tableIn.reload();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        $('#delAll').click(function(){
            layer.confirm('确认要关闭选中的工单吗？', {icon: 3}, function(index) {
                layer.close(index);
                var checkStatus = table.checkStatus('tools'); //test即为参数id设定的值
                var ids = '';
                $(checkStatus.data).each(function (i, o) {
                    ids += o.id+',';
                });

                var loading = layer.load(0, {shade: [0.1, '#fff']});
                $.post("{:url('close')}", {ids: ids}, function (data) {
                    layer.close(loading);
                    if (data.code === 1) {
                        layer.msg(data.msg, {time: 1000, icon: 1});
                        tableIn.reload();
                    } else {
                        layer.msg(data.msg, {time: 1000, icon: 2});
                    }
                });
            });
        });

        $('#add').click(function () {
            location.href = '{:url("addUI")}';
        });


        //设置预警期限
        $('#set').click(function () {

            layer.prompt({title:'请输入预警期限（单位：天）',value:waring},function(value, index, elem){

                value = parseInt($.trim(value));

                if(!(value) || value<=0){
                    layer.msg('请输入有效期限',{icon:5});
                    return;
                }

                $.post('{:url("Set/set")}',{name:'tools_waring',val:value},function (res) {
                    if (res.code === 1) {
                        layer.msg(res.msg, {time: 1000, icon: 1});
                    }
                });

                layer.close(index);
            });

        });

        
        //工具检测
        $('#check_tools').click(function () {
            let str = '';

            str += '<div style="color: green;font-size: 16px;">检测工具的待校验时间，修改过期时间的工具的状态。检测完成后，过期的工具不能再出借,等待校验。</div><div style="text-align: center;line-height: 100px;"><span id="start_check">开始检测</span></div>';

            layer.open({
                title:'工具检测',
                area:['500px','350px'],
                content:str,
                btn:false,
                maxmin: true,
                success:function (lay,index) {

                    let index_load = 0;

                    $('#start_check').click(function () {
                        index_load = layer.load(0,{shade:0.2,title:'检测中……'});

                        $.post('{:url("tools/checkTools")}',function () {
                            
                        });

                    });

                }
            });
        });


        //校验
        $('#check').click(function () {
            layer.confirm('确认要校验工具吗？', {icon: 3}, function(index) {

                var checkStatus = table.checkStatus('tools'); //test即为参数id设定的值
                var ids = '';
                $(checkStatus.data).each(function (i, o) {
                    ids += o.id+',';
                });
                if(ids.length<=0){
                    layer.msg('请选择工具',{icon:5});
                    return;
                }
                var loading = layer.load(0, {shade: [0.1, '#fff']});
                $.post("{:url('toCheck')}", {ids: ids}, function (data) {
                    layer.close(loading);
                    if (data.code === 1) {
                        layer.msg(data.msg, {time: 1000, icon: 1});
                        tableIn.reload();
                    } else {
                        layer.msg(data.msg, {time: 1000, icon: 2});
                    }
                });
            });
        });

        
        function recBack(data,id) {
            var tr = '';
            if(data.data.length<=0){
                $('#dataRec').append('<tr><td colspan="7">无使用记录</td></tr>');
            }
            $.each(data.data,function (k,v) {
                tr = '<tr>';
                tr += '<td>'+v.lend_time+'</td>';
                tr += '<td>'+v.out_name+'</td>';
                tr += '<td>'+v.input_name+'</td>';
                tr += '<td>'+(v.return_name?v.return_name:'')+'</td>';
                tr += '<td>'+(v.return_time?v.return_time:'')+'</td>';
                tr += '<td>'+v.state_name+'</td>';
                tr += '<td>'+(v.desc?v.desc:'')+'</td>';
                tr += '</tr>';
                $('#dataRec').append(tr);
            })

        }

        function pages(data,id) {
            page.render({
                elem: 'page_rec'
                ,count: data.total
                ,limit:data.per_page
                ,jump: function(obj, first){
                    //首次不执行
                    if(!first){
                        //do something
                        $.post('{:url("lendRec")}',{page:obj.curr,per_page:10,id:id},function (res) {
                            recBack(res,data.id);
                        });
                    }
                }
            });
        }
        
    });

    
</script>